<template>
    <Search v-if="ban.length" />
    <div class="scroll">
        <div class="page">
            <van-pull-refresh v-model="loading" @refresh="onRefresh" success-text="刷新成功">

                <Banner :ban="ban" />

                <div class="ico">
                    <van-image v-for="item in ico" :key="item.sp_home_id" :src="item.sp_home_ico"
                        :default="item.sp_home_title" @click="jump(item)">
                        <template v-slot:loading>
                            <van-loading type="spinner" size="20" />
                        </template>
                        <p>{{ item.sp_home_title }}</p>
                    </van-image>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script lang="ts" setup>
import Search from '@/components/search.vue'
import Banner from './components/banner.vue'
import { getFirstList, type First } from '@/api'
import { ref, watchEffect } from 'vue'
import { showToast } from 'vant'

// 下拉
const loading = ref(false);

// 轮播图
const ban = ref<First.bannerItem[]>([])
// icon
const ico = ref<First.sortIcon[]>([])



function jump(event: First.sortIcon) {
    console.log(event.sp_home_title);
    // 跳转 TODO...

}


// 下拉刷新
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
    }, 1000);
}

watchEffect(async () => {
    const res: First.myFirst = await getFirstList()
    // console.log(res);
    const [a, b] = res
    ico.value = a as any
    ban.value = b as any
})
</script>
<style lang="scss" scoped>
.scroll {
    padding-bottom: 15px;
    box-sizing: border-box;
}

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    // overflow-y: auto;
}

.ico {
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.van-image {
    width: 64px;
    height: 64px;
    margin: 18px 10px;
}
</style>
  